<template>
	<view class="content">
		<!-- 文字横向滚动 -->
		<scroll-view class="rows" scroll-x="true">
			<block v-for="(item,index) in arr" :key="index">
				<view class="rowsa" @click="less(index)" :class="naits==index?'zheng':'jias'">{{item}}</view>
			</block>
		</scroll-view>
		<!-- 轮播图 -->
		<swiper autoplay indicator-dots circular>
			<block v-for="(item,index) in imgUrl" :key="index">
				<swiper-item>
					<image :src="item" style="height:100%;width:100%"></image>
				</swiper-item>
			</block>
		</swiper>
		<!-- 文字轮播 -->
		<view class="box2">
			<view style="float:left">公告:</view>
			<swiper autoplay vertical class="swipe-adv">
				<swiper-item>
					<text style="color: red;">今年夏天冰火两重天</text>
				</swiper-item>
				<swiper-item>
					<text style="color: red;">今年深圳雨水多</text>
				</swiper-item>
			</swiper>
		</view>
		<view class="box3">
			<scroll-view class="pris" scroll-x>
				<view style="display: flex;" class="benis">
					<view class="pop" v-for="(item,index) in imgbens" :key="index">
						<image :src="item.src"></image>
						<text style="display: block;">{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="box4" style="margin-top: 50rpx;">
			<block v-for="(item,index) in nos" :key="index">
				<view style="float: left; margin-left: 20rpx;">
					<view>
						<image :src="item.src"></image>
					</view>
					<view><text>{{item.name}}</text></view>
					<view style="color: red;"><text>{{item.moeny}}</text></view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				naits:0,
				arr: [
					"缤纷", "彩虹", "夏日", "缤纷", "彩虹", "夏日", "清凉", "缤纷", "彩虹", "夏日", "清凉"
				],

				imgUrl: ["../../static/images/banner/1.jpg", "../../static/images/banner/2.jpg", "../../static/images/banner/3.jpg",
					"../../static/images/banner/4.jpg", "../../static/images/banner/5.jpg"
				],

				imgbens: [{
						src: "../../static/images/hotprod/1.png",
						name: "热销一"
					},
					{
						src: "../../static/images/hotprod/2.png",
						name: "热销二"
					},
					{
						src: "../../static/images/hotprod/3.png",
						name: "热销三"
					},
					{
						src: "../../static/images/hotprod/4.png",
						name: "热销四"
					},
					{
						src: "../../static/images/hotprod/5.png",
						name: "热销五"
					},
					{
						src: "../../static/images/hotprod/6.png",
						name: "热销六"
					},
					{
						src: "../../static/images/hotprod/7.png",
						name: "热销七"
					},
					{
						src: "../../static/images/hotprod/8.png",
						name: "热销八"
					},
					{
						src: "../../static/images/hotprod/9.png",
						name: "热销九"
					},
					{
						src: "../../static/images/hotprod/10.png",
						name: "热销十"
					},
					{
						src: "../../static/images/hotprod/10.png",
						name: "热销十一"
					}

				],
				nos:[
				       {
				        src:"../../static/images/goods/1.jpg",
				        name:"我是商品1",
				        moeny:"￥2341"
				       },
				       {
				        src:"../../static/images/goods/2.jpg",
				        name:"我是商品2",
				        moeny:"￥2341"
				       },
				       {
				        src:"../../static/images/goods/3.jpg",
				        name:"我是商品3",
				        moeny:"￥2341"
				       },
				       {
				        src:"../../static/images/goods/4.jpg",
				        name:"我是商品4",
				        moeny:"￥2341"
				       },
				       {
				        src:"../../static/images/goods/5.jpg",
				        name:"我是商品4",
				        moeny:"￥2341"
				       },
				       {
				        src:"../../static/images/goods/6.jpg",
				        name:"我是商品4",
				        moeny:"￥2341"
				       },
				       {
				        src:"../../static/images/goods/7.jpg",
				        name:"我是商品4",
				        moeny:"￥2341"
				       },
				              {
				        src:"../../static/images/goods/8.jpg",
				        name:"我是商品4",
				        moeny:"￥2341"
				       },
				       
				    ]

			}
		},
		onLoad() {

		},
		methods: {
			less(index){
				this.naits=index
				// console.log(index)
			}
		}
	}
</script>

<style scoped>
	.rowsa {
		display: inline-block;
		margin: 0 10rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.rows {
		white-space: nowrap;
		width: 100%;
	}

	.box2 {
		height: 80rpx;
		margin-top: 30rpx;
	}

	.swipe-adv {
		height: 70rpx;
		overflow: hidden;
	}

	.box3 {
		width: 100%;
		height: 360rpx;
	}
	
	.zheng{
		border-bottom: 4rpx solid #FF0000;
		color: #FF0000;
		
	}


	.box3 image {
		width: 100rpx;
		height: 100rpx;
	}

	.pop {
		margin: 0rpx 18rpx;
	}

	.benis {
		width: 120%;
		flex-wrap: wrap;
		margin-left: 15rpx;
	}

	.pris {
		width: 100%;
	}
	
	.box4 image{
	    width: 350rpx;
	    height: 350rpx;
	}

</style>
